@font-face {
    font-family: 'Garqag';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/OyunGarqagTig.ttf') format('truetype');
}

@font-face {
    font-family: 'SourceCN';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/SOURCEHANSANSCN-REGULAR.TTF') format('truetype');
}

@font-face {
    font-family: 'Hara';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/OyunHaraTig.ttf') format('truetype');
}

@font-face {
    font-family: 'Garbiqimel';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/OyunGarbiqimelTig.ttf') format('truetype');
}

@font-face {
    font-family: 'Hawang';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/OyunHawangTig.ttf') format('truetype');
}

@font-face {
    font-family: 'Sonin';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/OyunSoninTig.ttf') format('truetype');
}

@font-face {
    font-family: 'Agula';
    font-weight: normal;
    font-style: normal;
    src: url('fonts/OyunAgulaTig.ttf') format('truetype');
}

@font-face {
    font-family: 'Qagan';
    font-weight: normal;
    font-style: normal;
    src: url('fonts/OyunQaganTig.ttf') format('truetype');
}

@font-face {
    font-family: 'GurbanUlus';
    font-weight: normal;
    font-style: normal;
    src: url('fonts/Oyun Gurban Ulus Tig.ttf') format('truetype');
}

@font-face {
    font-family: DIN;
    src: url('fonts/din-bold-webfont.woff2') format('woff2'), url('fonts/din-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.mn {
    writing-mode: vertical-lr;
    font-size: 20px;
    font-family: 'Qagan';
    text-orientation: sideways;
    text-orientation: sideways-right;
}

body {
    font-family: Qagan;
    font-size: 20px;
    margin: 0;
}

* {
    box-sizing: border-box;
}

#app {
    width: 100vw;
    height: 100vh;
    display: flex;
    /*justify-content: center;
    align-items: center;*/
    margin: 0;
}

.ch {
    text-orientation: upright;
}

.el-tabs {
    /*height: 600px;
    width: 960px;*/
    background: #FFFFFF;
    /*border: 1px solid #8E989D;*/
    /*box-shadow: 0px 0px 18px 2px rgba(204, 204, 204, 0.8);*/
    width: 100vw;
    height: 100vh;
}

.el-tabs__header {
    background: #F5F5F5;
    border-radius: 10px 0px 0px 10px;
    margin-right: 0 !important;
}

.el-tabs__nav {
    height: 100%;
    display: flex;
    flex-flow: column
}

.el-tabs__nav .el-tabs__item {
    width: 60px;
    line-height: 60px;
    height: auto;
    padding: 20px 0;
    writing-mode: vertical-lr;
    font-size: 20px;
    flex: 1;
    text-align: center !important;
    font-family: Hara;
}

.el-tabs__content,
.el-tab-pane {
    height: 100%;
    display: flex;
}

.row {
    height: 100%;
    margin: 0 20px 0 0;
    display: flex;
    padding: 50px 0;
}

.row .radioBox {
    height: 100%;
    display: flex;
}

.radioBox label:first-child {
    font-size: 22px;
    font-family: Hara;
    font-weight: 400;
    color: #000000;
    line-height: 36px;
}

.row .radioBox > label {
    height: 100%;
}

.row .radioBox > div {
    display: flex;
    flex-wrap: wrap;
    /*max-width: 200px; !* 设置容器最大宽度 *!*/
    height: 50% !important;
    flex-flow: column;
    width: 120px;
}

.row .font-radio {
    max-width: 180px;
}

.row .correctDiv {
    max-width: 200px;
}

.row .radioBox > div label {
    flex-basis: calc(50% - 10px); /* 设置每个标签的宽度 */
    margin: 5px; /* 设置标签之间的间距 */
    /*height: 45%;*/
    margin-bottom: 40px !important;
    display: flex;
    align-items: center;
}

.el-radio {
    display: flex;
    align-items: center;
}

.col .radioBox {
    height: 45%;
    display: flex;
}


.el-radio {
    margin: 0 0 30px 0 !important;
}

.row .radioBox {
    height: 100%;
    display: flex;
}

.radioBox label:first-child {
    /* ... */
}

.row .radioBox > label {
    height: 100%;
}

.row .radioBox > div {
    display: flex;
    flex-wrap: wrap;
    flex-flow: row wrap; /* 设置为row wrap */
    width: 100%;
}

.row .radioBox > div label {
    flex-basis: auto;
    margin: 5px 10px;
    /* ... */
}

.el-radio .el-radio__label {
    padding-left: 0;
    padding-top: 10px;
    font-size: 22px;
    font-family: 'Qagan';
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
}

.el-radio .el-radio__label font {
    padding-bottom: 20px;
}

.el-radio__input.is-checked + .el-radio__label {
    font-size: 22px;
    font-family: 'Qagan';
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
}

.row.fonts .radioBox .el-radio__label {
    font-family: unset;
}

label {
    writing-mode: vertical-lr;
    font-family: Qagan;
    line-height: 28px;
    font-size: 20px;
    font-weight: 400;
    color: #000000;
}

.el-tabs__content .count {
    writing-mode: vertical-lr;
    display: flex;
    padding: 0;
    list-style: none;
    margin-top: -5px;
    margin-bottom: -5px;
}

.el-tabs__content .count li {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 98px;
    margin: 5px;
    background: #EEEEEE;
}

.el-tabs__content .count li label {
    font-family: Hara;
}

.el-tabs__content .count li span {
    writing-mode: horizontal-tb;
    padding: 10px 0;
    font-size: 16px;
    font-family: DIN;
}

.tips {
    padding-top: 10px;
    font-size: 19px;
    font-family: Qagan;
    font-weight: 400;
    color: #02A7F0;
    writing-mode: vertical-lr;
}


/*************tab-pane-secoods**********/

.col {
    height: 100%;
    margin: 0 20px;
    display: flex;
    flex-flow: column;
    padding: 50px 0;
}

.col > label {
    font-size: 22px;
    font-family: Hara;
    font-weight: 400;
    color: #000000;
    line-height: 36px;
}

.vertical {
    display: flex;
    flex-flow: column;
}

.el-button {
    padding: 20px 8px;
}

.el-button span {
    writing-mode: vertical-lr;
    font-size: 18px;
    font-family: Hara;
}

.el-button--mini {
    padding: 15px 5px;
}

.el-button--mini span {
    writing-mode: vertical-lr;
    font-size: 16px;
    font-family: Hara;
}

.el-button + .el-button,
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
    margin-left: 0;
    margin-top: 10px;
}

table {
    border: none;
    border-color: #ebeef5;
    background: white;
}

table tbody {
    display: flex;
    height: 100%;
}

table tbody tr th {
    font-family: Hara !important;
    font-size: 20px;
    font-weight: normal;
    background: #F5F5F5;
    border: none;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

table tbody tr td {
    padding-top: 10px;
    font-size: 16px;
    border: none;
    width: 50px;
    border-right: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
}

table tbody tr th:nth-child(2),
table tbody tr td:nth-child(2) {
    flex: 1;
}

table tbody tr td:nth-child(2) {
    font-family: Qagan;
    font-size: 22px;
}

table tbody tr th:first-child,
table tbody tr td:first-child {
    height: 86px;
}

table tbody tr td:first-child {
    font-size: 18px;
    font-family: SourceCN;
}

table tbody tr th:nth-child(3),
table tbody tr td:nth-child(3) {
    height: 46px;
}

table tbody tr td:nth-child(3) {
    font-size: 20px;
    font-family: SourceCN;
    padding-top: 10px;
}

table tbody tr th:last-child,
table tbody tr td:last-child {
    height: 80px;
    display: flex;
    justify-content: space-around;
    writing-mode: vertical-lr;
    align-items: center;
}

table tbody tr td i {
    cursor: pointer;
}

table td .el-input {
    writing-mode: vertical-lr;
    height: 100%;
    width: 36px;
}

table td .el-input input {
    height: 100%;
    display: table-column;
    font-size: 18px;
    font-family: 'Qagan';
}

table tbody tr td i:hover {
    color: #409EFF;
}

table tr {
    display: flex;
    writing-mode: vertical-lr;
}

.el-pagination {
    writing-mode: vertical-lr;
    text-align: center;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
    margin: 5px 0;
    border: 1px solid #EEEEEE !important;
}

.el-pager li {
    padding: 4px 0 !important;
    min-width: 28px !important;
    margin: 3px;
    border: 1px solid #EEEEEE !important;
}

.el-icon-arrow-left:before {
    font-family: iconfont;
    content: "\e7b5";
}

.el-icon-arrow-left,
.el-icon-arrow-right {
    transform: rotate(90deg);
    font-size: 14px !important;
}

.el-pagination .btn-prev {
    padding-right: 7px;
    border: 1px solid #f5f5f5 !important;
    width: 30px;
    min-width: 28px !important;
}

.el-pagination .btn-next {
    padding-left: 7px;
    border: 1px solid #f5f5f5 !important;
    width: 30px;
    min-width: 28px !important;
}

.el-pagination .btn-prev:hover,
.el-pagination .btn-next:hover {
    background: #EEEEEE;
}

.el-icon-arrow-right:before {
    font-family: iconfont;
    content: "\e7b6";
}

.el-pager .more::before {
    line-height: 28px !important;
}

.el-dialog__wrapper {
    position: absolute;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
}

.el-dialog {
    display: flex;
    width: fit-content;
}

.el-dialog .el-dialog__title {
    writing-mode: vertical-lr;
    font-family: Hara;
    font-size: 20px;
}

.el-form {
    display: flex;
    height: 100%
}

.el-form .el-form-item {
    display: flex;
}

.el-form .el-form-item__label {
    font-size: 22px;
    font-family: Qagan;
    font-weight: 400;
    color: #010101;
    padding: 0;
}

.el-form .el-form-item__content {
    writing-mode: vertical-lr;
}

.el-form .el-form-item__content input {
    display: table-column;
    height: 100%;
    width: 40px;
    padding: 0;
    font-family: Qagan;
    font-size: 18px;
}

.el-form .el-form-item__content textarea {
    display: table-column;
    height: 100%;
    width: 80px;
    padding: 0;
    font-family: Qagan;
    font-size: 18px;
}

.el-textarea {
    height: 100%;
}

.el-form-item__label {
    text-align: left;
    font-size: 18px;
    font-family: Hara;
}

.el-form .el-form-item__content .el-input {
    height: 100%;
    position: relative;
}

.el-input__suffix {
    right: 5px;
    transition: all .3s;
    width: 40px;
    height: 10px;
    position: absolute;
    bottom: 5px;
    left: 16px;
    top: auto;
}

.el-select .el-input .el-select__caret.is-reverse {
    transform: translateY(0px) rotateZ(90deg);
}

.el-select-dropdown__list {
    display: flex;
    max-width: 200px;
    overflow-x: auto;
}

.el-select-dropdown__item {
    font-size: 16px;
    font-family: Qagan;
    padding: 20px 0;
    height: auto;
    min-width: 34px;
    line-height: 34px;
    writing-mode: vertical-lr;
}


/**radio**/

.el-radio__input .el-radio__inner {
    border: 1px solid #1B1E1F;
}

.el-radio__input.is-checked .el-radio__inner {
    border: 1px solid #02A7F0;
    background: none;
}

.el-radio__inner::after {
    width: 8px;
    height: 8px;
    background: #1B1E1F;
}

.el-checkbox .el-checkbox__inner {
    border: 1px solid #1B1E1F;
}

.el-message-box__btns .el-button {
    padding: 8px 20px;
}

.el-message-box__btns .el-button span {
    writing-mode: horizontal-tb;
    font-size: 12px;
}

.el-checkbox {
    display: flex;
    align-items: center;
}

.el-checkbox__label {
    padding-left: 0;
    padding-top: 10px;
    font-size: 20px;
    font-family: 'Qagan';
    font-weight: 400;
}

/*.el-dialog__wrapper{*/
/*    width: 540px;*/
/*}*/
/*后面两个元素有偏移*/
.el-dialog__body .el-form-item:nth-child(2) {
    position: absolute;
    top: 30px;
    left: 171px;
    width: 87px;
    height: 420px;
}

.el-dialog__body .el-form-item:nth-child(3) {
    position: absolute;
    top: 30px;
    left: 258px;
    width: 87px;
    height: 420px;
}

.el-form {
    width: 320px;
}


/*符号*/

.container {
    display: flex;
    height: 560px;
    width: 660px;
    /*width: 100%;
    height: 100%;*/
    background: #FFFFFF;
    /*border: 1px solid #8E989D;*/
    /*box-shadow: 0px 0px 18px 2px rgba(204, 204, 204, 0.8);*/
}

.container .logo {
    width: 60px;
    min-width: 60px;
    height: 100%;
    writing-mode: vertical-lr;
    padding: 20px 0;
    display: flex;
    align-items: center;
    background: #F5F5F5;
}

.container .logo img {
    flex: 0;
    width: 32px;
}

.container .logo label {
    font-size: 22px;
    font-family: Hara;
    font-weight: 400;
    color: #000000;
    line-height: 24px;
    padding-top: 12px;
}

.container .el-tabs {
    box-shadow: none;
    border: none;
    padding-left: 30px;
    height: 558px;
}

.container .el-tabs .el-tabs__header.is-left {
    margin: 50px 0;
    height: calc(100% - 100px);;
    border-radius: 0;
    background: transparent;
    margin-right: 20px !important;
}

.container .el-tabs--left .el-tabs__active-bar.is-left,
.container .el-tabs--left .el-tabs__nav-wrap.is-left::after {
    width: 0;
}

.container .el-tabs .el-tabs__item.is-active {
    color: white;
    background: #02A7F0;
}

.container .el-tabs .el-tabs__nav .el-tabs__item {
    width: 52px;
    line-height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .el-tabs .el-tabs__nav .el-tabs__item span {
    text-align: left;
}

.container .el-tabs .formBox {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-flow: column;
    flex-wrap: wrap;
}

.container .el-tabs .formBox li {
    width: 40px;
    height: 40px;
    border: 1px solid #C3C9CB;
    margin-top: -1px;
    margin-left: -1px;
    text-align: center;
    line-height: 40px;
}

.container .el-tabs .formBox.vertical li {
    writing-mode: vertical-lr;
}

.container .el-tabs .el-tabs__content {
    display: flex;
    margin-right: 20px;
}

.container .el-tabs .el-tabs__content .el-tab-pane {
    flex: 1;
    overflow-y: hidden;
    overflow-x: auto;
    flex-wrap: nowrap;
    height: calc(100% - 63px);
    align-self: center;
    padding: 5px 0;
}

.container .el-tabs .el-tabs__content .el-tab-pane::-webkit-scrollbar {
    /*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）*/
    width: 10px;
    height: 10px;
}

.container .el-tabs .el-tabs__content .el-tab-pane::-webkit-scrollbar-track-piece {
    /*内层轨道，滚动条中间部分（位置4）*/
    background: #EDEEEF;
    border-radius: 6px;
}

.container .el-tabs .el-tabs__content .el-tab-pane::-webkit-scrollbar-thumb {
    /*滚动条里面可以拖动的那部分（位置5）*/
    background: #C3C9CB;
    border-radius: 6px;
}

.container .el-tabs .el-tabs__content .el-tab-pane .row {
    padding: 0;
    align-self: baseline;
}